<template>
  <edit-card :title="pageTitle" :type="pageType" :loading="loading" @confirm="submit">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      name="form"
      :colon="false"
      :label-col="{ style: { width: '120px' } }"
      label-align="left"
    >
      <a-form-item v-if="!isAdd" label="应用编号" class="mb-40">
        <a-input v-model:value="formState.number" class="w-440" disabled />
      </a-form-item>
      <a-form-item label="应用名称" name="name" class="mb-40">
        <a-input v-model:value="formState.name" v-trim class="w-440" :maxlength="200" placeholder="请输入应用名称" />
      </a-form-item>
      <a-form-item class="required mb-40" label="选择服务" name="service">
        <div class="service-module w-864">
          <div v-if="isChecking" class="mx-auto fc">
            <i class="mr-6 iconfont icon-error-warning-fill" style="color: rgba(70, 134, 237, 1)"></i>
            <div class="text-color-3">您有服务正在审核，暂时无法操作</div>
          </div>
          <a-tabs
            v-else
            style="width: 100%"
            :active-key="tabsActiveKey"
            :tab-bar-style="{ color: 'rgba(25, 25, 48, 0.75)', border: 'none' }"
            @change="tabsClick"
          >
            <a-tab-pane key="1" :tab="`API服务（已选${selectApiServiceNum}）`">
              <a-form-item>
                <a-checkbox-group v-model:value="checkedApiAlgoIds" style="width: 100%" @change="checkoutApiChange">
                  <div v-for="item in apiAlgoDataList" :key="item.id" class="over-wrap">
                    <a-checkbox :value="item.id" :disabled="item.selectFlag">
                      {{ item.algorithmServiceName }}
                    </a-checkbox>
                  </div>
                </a-checkbox-group>
              </a-form-item>
              <a-form-item v-show="checkedApiAlgoIds.length">
                <a-collapse
                  v-for="apiAlgo in apiAlgoDataList"
                  v-show="checkedApiAlgoIds.includes(apiAlgo.id)"
                  :key="apiAlgo.id"
                  style="margin-bottom: 8px"
                >
                  <a-collapse-panel :key="apiAlgo.id">
                    <template #header>
                      <div class="collapse-panel-header">
                        <div>{{ apiAlgo.algorithmServiceName }}</div>
                        <div v-if="apiAlgo.showErrorCollapse" style="color: red">服务信息未填写</div>
                      </div>
                    </template>
                    <a-table
                      :style="{ width: '100%' }"
                      :columns="apiTableColumns"
                      size="small"
                      :data-source="apiAlgo.operateList"
                      class="header-right-angle admin-table"
                      :pagination="false"
                      row-key="id"
                      :row-selection="{
                        selectedRowKeys: selectedApiServiceIdObj[apiAlgo.id],
                        onChange: e => onSelectApiChange(e, apiAlgo.id),
                        getCheckboxProps:  (record: ApiServiceListOperateList) => ({ disabled: record.selectFlag })
                      }"
                    >
                      <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex == 'versionName'"> {{ record.versionName }} </template>
                        <template v-else-if="column.dataIndex == 'addTotalCallNum'">
                          <a-input-number
                            v-model:value.number="record.addTotalCallNum"
                            :class="['w-90', record.isInputAddTotalCall ? 'error-input' : '']"
                            :precision="0"
                            :min="0"
                            :max="99999999"
                            :disabled="
                              selectedApiServiceIdObj[apiAlgo.id]?.indexOf(record.id) === -1 || !selectedApiServiceIdObj[apiAlgo.id]
                                ? true
                                : false
                            "
                            @change="apiInputNumberChange"
                          />
                        </template>
                        <template v-else-if="column.dataIndex == 'addQps'">
                          <a-row align="middle">
                            <a-input-number
                              v-model:value.number="record.addQps"
                              :class="['w-90', record.isInputAddQps ? 'error-input' : '']"
                              :precision="0"
                              :min="0"
                              :max="record.availableQps"
                              :disabled="
                                selectedApiServiceIdObj[apiAlgo.id]?.indexOf(record.id) === -1 || !selectedApiServiceIdObj[apiAlgo.id]
                                  ? true
                                  : false
                              "
                              @change="apiInputNumberChange"
                            />
                            <span class="ml-4 text-color-4">可申请额度：{{ record.availableQps }}</span>
                          </a-row>
                        </template>
                        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template>
                      </template>
                    </a-table>
                  </a-collapse-panel>
                </a-collapse>
              </a-form-item>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="`SDK服务（已选${selectSdkServiceNum}）`">
              <a-form-item>
                <a-checkbox-group v-model:value="checkedSdkAlgoIds" style="width: 100%" @change="checkoutSdkChange">
                  <div v-for="item in sdkAlgoDataList" :key="item.id">
                    <a-checkbox :value="item.id" :disabled="item.selectFlag">
                      {{ item.algorithmServiceName }}
                    </a-checkbox>
                  </div>
                </a-checkbox-group>
              </a-form-item>
              <a-form-item v-show="checkedSdkAlgoIds.length">
                <a-collapse
                  v-for="sdkAlgo in sdkAlgoDataList"
                  v-show="checkedSdkAlgoIds.includes(sdkAlgo.id)"
                  :key="sdkAlgo.id"
                  style="margin-bottom: 8px"
                >
                  <a-collapse-panel :key="sdkAlgo.id">
                    <template #header>
                      <div class="collapse-panel-header">
                        <div>{{ sdkAlgo.algorithmServiceName }}</div>
                        <div v-if="sdkAlgo.showErrorCollapse" style="color: red">服务信息未填写</div>
                      </div>
                    </template>
                    <a-table
                      :style="{ width: '100%' }"
                      :columns="sdkTableColumns"
                      :data-source="sdkAlgo.operateList"
                      :pagination="false"
                      row-key="relId"
                      :row-selection="{
                        selectedRowKeys: selectedSdkServiceIdObj[sdkAlgo.id],
                        onChange: e => onSelectSdkChange(e, sdkAlgo.id),
                        getCheckboxProps:  (record: SdkServiceListOperateList) => ({ disabled: record.selectFlag }),

                      }"
                    >
                      <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex == 'addTotalActivateNum'">
                          <a-input-number
                            v-model:value.number="record.addTotalActivateNum"
                            :class="['w-90', record.isInputAddTotalActivateNum ? 'error-input' : '']"
                            :precision="0"
                            :min="0"
                            :max="99999999"
                            :disabled="
                              record.activationMethodId === 2 ||
                              selectedSdkServiceIdObj[sdkAlgo.id]?.indexOf(record.relId) === -1 ||
                              !selectedSdkServiceIdObj[sdkAlgo.id]
                            "
                            @change="sdkInputNumberChange"
                          />
                        </template>
                        <template v-else-if="column.dataIndex == 'sign'">
                          <upload-fingerprint-file
                            v-if="record.activationMethodId === 2"
                            :app-serve-id="record.appServeId"
                            :file-name="record.fileName"
                            :disabled="
                              selectedSdkServiceIdObj[sdkAlgo.id]?.indexOf(record.relId) === -1 || !selectedSdkServiceIdObj[sdkAlgo.id]
                                ? true
                                : false
                            "
                            @uploadSuccess="uploadSuccess($event, record)"
                          />
                        </template>
                        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template>
                      </template>
                    </a-table>
                  </a-collapse-panel>
                </a-collapse>
              </a-form-item>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-form-item>
      <a-form-item label="应用描述" name="content">
        <a-textarea
          v-model:value="formState.content"
          v-trim
          :rows="4"
          show-count
          class="w-440"
          :maxlength="200"
          placeholder="请输入应用描述"
        />
      </a-form-item>
    </a-form>
  </edit-card>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import EditCard, { Type } from '@/components/EditCard/index.vue'
  import UploadFingerprintFile, { UploadRes } from '@/components/UploadFingerprintFile/index.vue'
  import { appApi } from '@/services/api'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'
  import { validateBitLen, validateDirName } from '@/utils'

  import { addApiTableColumns, addSdkTableColumns, editApiTableColumns, editSdkTableColumns } from './config'
  import { AlgoList, ApiServiceList, ApiServiceListOperateList, Key, SdkServiceListOperateList, SubmitForm } from './types'

  const route = useRoute()
  const router = useRouter()

  const pageType = route.params.type as Type
  const appId = (route.query.id as string) || ''
  const isAdd = route.params.type === 'add' //add新增 edit修改
  const applyName = ref('')

  const pageTitle = computed(() => {
    return isAdd ? '创建应用' : `编辑应用（${applyName.value || ''}）`
  })
  const loading = computed(
    () => isGetAlgoListLoading.value || isGetAppDetailLoading.value || isAddAlgoLoading.value || isEditAlgoLoading.value
  )

  const formRef = ref()
  const formState = ref<SubmitForm>({
    name: '',
    status: '',
    content: '',
    number: '',
    apiList: [],
    sdkList: []
  })
  const isChecking = computed(() => ['待审核', '审核中'].includes(formState.value.status)) //是否正在审核
  const checkService = () => {
    let serverRules =
      formState.value.apiList.length === 0 &&
      formState.value.sdkList.length === 0 &&
      checkedApiAlgoIds.value.length === 0 &&
      checkedSdkAlgoIds.value.length === 0
    if (serverRules) {
      return Promise.reject('请选择服务')
    }
    return Promise.resolve()
  }
  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, message: '请输入应用名称' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    service: [{ validator: checkService }]
  }
  const algoList = ref<AlgoList>({
    apiServiceList: [],
    sdkServiceList: []
  })

  const { loading: isGetAlgoListLoading, runAsync: getAlgoList } = useRequest<ResponseData<AlgoList>>(appApi.algoList, {
    onSuccess: res => {
      res.data.apiServiceList.map((apiList: ApiServiceList) => {
        apiList.operateList.map((item: ApiServiceListOperateList) => {
          item['isInputAddTotalCall'] = false
          item['isInputAddQps'] = false
        })
      })
      res.data.sdkServiceList.map(sdkAlgo => {
        sdkAlgo.operateList.map((item: SdkServiceListOperateList) => {
          item['isInputAddTotalActivateNum'] = false
        })
      })
      algoList.value = res.data
    }
  })

  const { loading: isGetAppDetailLoading, runAsync: getAppDetail } = useRequest<ResponseData<AlgoList>>(appApi.editData(appId), {
    onSuccess: res => {
      applyName.value = res.data.name || ''

      formState.value.name = res.data.name || ''
      formState.value.content = res.data.content || ''
      formState.value.number = res.data.number || ''
      formState.value.status = res.data.status || ''
      algoList.value = res.data

      // 遍历所有数据回显勾选状态
      checkedApiAlgoIds.value = algoList.value.apiServiceList.filter(item => item.selectFlag).map(item => item.id)
      checkedSdkAlgoIds.value = algoList.value.sdkServiceList.filter(item => item.selectFlag).map(item => item.id)
      // 回显表格选中项selectedApiServiceIdObj,selectedSdkServiceIdObj
      algoList.value.apiServiceList.forEach(apiAlgo => {
        selectedApiServiceIdObj.value[apiAlgo.id] = apiAlgo.operateList.filter(item => item.selectFlag).map(item => item.id)
        apiAlgo.operateList.forEach(server => {
          if (server.selectFlag) {
            server['addTotalCallNum'] = 0
            server['addQps'] = 0
          }
        })
      })
      algoList.value.sdkServiceList.forEach(sdkAlgo => {
        selectedSdkServiceIdObj.value[sdkAlgo.id] = sdkAlgo.operateList.filter(item => item.selectFlag).map(item => item.relId)
        sdkAlgo.operateList.forEach(server => {
          if (server.selectFlag) {
            server['addTotalActivateNum'] = 0
          }
        })
      })
      console.log(checkedApiAlgoIds, selectedSdkServiceIdObj, algoList)
    }
  })
  const { loading: isAddAlgoLoading, runAsync: addAlgo } = useRequest<ResponseData<AlgoList>>(appApi.add, {
    onSuccess: () => {
      message.success('操作成功')
      router.go(-1)
    }
  })
  const { loading: isEditAlgoLoading, runAsync: editAlgo } = useRequest<ResponseData<AlgoList>>(appApi.edit, {
    onSuccess: res => {
      console.log(res)
      message.success('操作成功')
      if (!res.data) {
        router.push('/ai-app/app-list/list')
        return
      }
      router.go(-1)
    }
  })

  const submit = async () => {
    // 清空已选值
    formState.value.apiList = []
    formState.value.sdkList = []

    // 是否选择api表格
    let upAPI = getApiAlgoStatus()

    // 是否选择adk表格
    let upSDK = getSdkAlgoStatus()
    // 遍历Api算法勾选项判断是否已勾选 => 将表格选中项添加到对应的参数列表中
    apiAlgoDataList.value.forEach(apiAlgo => {
      const isChecked = checkedApiAlgoIds.value.includes(apiAlgo.id)
      if (!isChecked) return
      if (selectedApiServiceIdObj.value[apiAlgo.id]?.length === 0) return
      apiAlgo.operateList.forEach(service => {
        const isSelect = selectedApiServiceIdObj.value[apiAlgo.id]?.includes(service.id)
        // 判断条件两个 1.没有选择当前表格，新建，并且没有选择
        if (!isSelect) return
        if ((setInputBorder(service) && !service.selectFlag && !isAdd) || (setInputBorder(service) && isAdd)) return false

        formState.value.apiList.push({
          operateMethodId: service.id,
          totalCallNum: service.addTotalCallNum || 0,
          qps: service.addQps || 0,
          addTotalCallNum: service.addTotalCallNum || 0,
          addQps: service.addQps || 0,
          appServeId: service.appServeId
        })
      })
    })
    // 遍历SDK算法勾选项判断是否已勾选 => 将表格选中项添加到对应的参数列表中
    sdkAlgoDataList.value.forEach(sdkAlgo => {
      const isChecked = checkedSdkAlgoIds.value.includes(sdkAlgo.id)
      if (!isChecked) return

      if (selectedSdkServiceIdObj.value[sdkAlgo.id]?.length === 0) return

      sdkAlgo.operateList.forEach(service => {
        const isSelect = selectedSdkServiceIdObj.value[sdkAlgo.id]?.includes(service.relId)
        if (!isSelect) return

        if ((setSDKInputBorder(service) && !service.selectFlag && !isAdd) || (setSDKInputBorder(service) && isAdd)) return false

        formState.value.sdkList.push({
          operateMethodId: service.relId.slice(0, service.relId.length - 1),
          authType: service.activationMethodId,
          totalActivateNum: service.addTotalActivateNum || 0,
          addTotalActivateNum: service.addTotalActivateNum || 0,
          appServeId: service.appServeId,
          sign: service.sign
        })
      })
    })

    await formRef.value.validate()
    if (!upAPI) return
    if (!upSDK) return
    console.log('提交')
    if (isAdd) {
      addAlgo(formState.value)
      return
    } else {
      // 审核中不需要传api及sdk
      if (isChecking.value) {
        formState.value.apiList = []
        formState.value.sdkList = []
      }
      editAlgo({
        id: appId,
        ...formState.value
      })
    }
  }
  // 标红
  const setInputBorder = (service: ApiServiceListOperateList) => {
    let status = false
    let callNumStatus = false // 是否是红色状态
    let qpsStatus = false

    let isFlag = (!service.selectFlag && !isAdd) || isAdd

    let addTotalCallNumBool = service['addTotalCallNum'] !== 0 && !service['addTotalCallNum'] && isFlag

    if (addTotalCallNumBool) {
      service['isInputAddTotalCall'] = true
      callNumStatus = true
    } else {
      service['isInputAddTotalCall'] = false
      callNumStatus = false
    }

    let addQps = service['addQps'] !== 0 && !service['addQps'] && isFlag

    if (addQps) {
      service['isInputAddQps'] = true
      qpsStatus = true
    } else {
      service['isInputAddQps'] = false
      qpsStatus = false
    }
    // 两个输入框都为false时，进行切换和提交
    if (!callNumStatus && !qpsStatus) {
      status = false
    } else {
      status = true
    }
    return status
  }
  const setSDKInputBorder = (service: SdkServiceListOperateList) => {
    let status = false
    let addTotalCallNumBool =
      service['addTotalActivateNum'] !== 0 && !service['addTotalActivateNum'] && ((!service.selectFlag && !isAdd) || isAdd)
    if (addTotalCallNumBool) {
      service['isInputAddTotalActivateNum'] = true
      status = true
    } else if (!addTotalCallNumBool) {
      service['isInputAddTotalActivateNum'] = false
      status = false
    }
    console.log(service, status)
    return status
  }
  // 判断当前表格中的数据追加提示
  const getApiAlgoStatus = () => {
    let tasInput = true
    // 遍历Api算法勾选项判断是否已勾选 => 将表格选中项添加到对应的参数列表中
    let api = apiAlgoDataList.value
      .map(apiAlgo => {
        const isChecked = checkedApiAlgoIds.value.includes(apiAlgo.id)
        if (!isChecked) return
        let ter = apiAlgo.operateList
          .map(service => {
            const isSelect = selectedApiServiceIdObj.value[apiAlgo.id]?.includes(service.id)
            if (!isSelect) return
            if (setInputBorder(service) && !service.selectFlag) {
              return false
            } else {
              return true
            }
          })
          .filter(item => item !== undefined)

        // 如果没有选择，或者没有填写完成
        if (ter.includes(false) || (!ter.includes(false) && !ter.includes(true))) {
          apiAlgo.showErrorCollapse = true
          return false
        } else if ((ter.includes(true) && !ter.includes(false)) || checkedApiAlgoIds.value.length === 0) {
          apiAlgo.showErrorCollapse = false
          return true
        }
      })
      .filter(item => item !== undefined)
    if (api.includes(false)) {
      tasInput = false
    } else {
      tasInput = true
    }
    // 如果tasInput === true 那么标识这一组数据是没问题的，如果未false那么不能提交和切换
    return tasInput
  }
  const getSdkAlgoStatus = () => {
    let tasInput = true
    // 遍历SDK算法勾选项判断是否已勾选 => 将表格选中项添加到对应的参数列表中
    let sdk = sdkAlgoDataList.value
      .map(sdkAlgo => {
        const isChecked = checkedSdkAlgoIds.value.includes(sdkAlgo.id)
        if (!isChecked) return
        let ter = sdkAlgo.operateList
          .map(service => {
            const isSelect = selectedSdkServiceIdObj.value[sdkAlgo.id]?.includes(service.relId)
            if (!isSelect) return
            if (setSDKInputBorder(service) && !service.selectFlag) {
              return false
            } else {
              return true
            }
          })
          .filter(item => item !== undefined)
        if (ter.includes(false) || (!ter.includes(false) && !ter.includes(true))) {
          sdkAlgo.showErrorCollapse = true
          return false
        } else {
          sdkAlgo.showErrorCollapse = false
          return true
        }
      })
      .filter(item => item !== undefined)
    if (sdk.includes(false)) {
      tasInput = false
    } else {
      tasInput = true
    }
    return tasInput
  }

  const tabsActiveKey = ref<string>('1')
  // tabs切换时应当有提示当前的信息是否填完
  const tabsClick = (key: string | any) => {
    let tasInput = getApiAlgoStatus()
    let sdkShow = getSdkAlgoStatus()
    if (key === '1') {
      if (!sdkShow) {
        console.error('服务信息不完善')
      } else if (sdkShow) {
        tabsActiveKey.value = '1'
      }
    } else if (key === '2') {
      if (!tasInput) {
        console.error('服务信息不完善')
      } else if (tasInput) {
        tabsActiveKey.value = '2'
      }
    }
  }
  // api输入框改变
  const apiInputNumberChange = () => {
    // tabsClick(tabsActiveKey.value)
    getApiAlgoStatus()
  }

  // sdk输入框改变
  const sdkInputNumberChange = () => {
    // tabsClick(tabsActiveKey.value)
    getSdkAlgoStatus()
  }
  /* api------------------------------------------------------------------------------------------------------------- */
  const apiAlgoDataList = computed(() => algoList.value.apiServiceList) //api算法列表
  const checkedApiAlgoIds = ref<string[]>([]) //api勾选的算法id

  const selectedApiServiceIdObj = ref<Record<string, Key[]>>({}) //表格选中的api服务id
  const selectApiServiceNum = computed(() => Object.values(selectedApiServiceIdObj.value).reduce((pre, cur) => pre + cur.length, 0))
  const apiTableColumns = ref(filterTableColumns(isAdd ? addApiTableColumns : editApiTableColumns))

  const onSelectApiChange = (selectedRowKeys: Key[], apiAlgoId: string) => {
    let diff = selectedApiServiceIdObj.value[apiAlgoId]
    if (!diff) return (selectedApiServiceIdObj.value[apiAlgoId] = selectedRowKeys)
    const differentElements = selectedRowKeys
      .filter(element => !diff.includes(element))
      .concat(diff.filter(element => !selectedRowKeys.includes(element)))
    apiAlgoDataList.value.map(apiAlgo => {
      if (apiAlgo.id === apiAlgoId) {
        apiAlgo.operateList.map(server => {
          differentElements.forEach(ID => {
            if (ID === server.id) {
              server['addQps'] = undefined
              server['addTotalCallNum'] = undefined
              server['isInputAddTotalCall'] = false
              server['isInputAddQps'] = false
            }
          })
        })
      }
    })
    selectedApiServiceIdObj.value[apiAlgoId] = selectedRowKeys
    getApiAlgoStatus()
  }

  /* sdk------------------------------------------------------------------------------------------------------------- */
  const sdkAlgoDataList = computed(() => algoList.value.sdkServiceList) //sdk算法列表
  const checkedSdkAlgoIds = ref<string[]>([]) //sdk勾选的算法id

  const selectedSdkServiceIdObj = ref<Record<string, Key[]>>({}) //表格选中的sdk服务id
  const selectSdkServiceNum = computed(() => Object.values(selectedSdkServiceIdObj.value).reduce((pre, cur) => pre + cur.length, 0))
  const sdkTableColumns = ref(filterTableColumns(isAdd ? addSdkTableColumns : editSdkTableColumns))

  const onSelectSdkChange = (selectedRowKeys: Key[], sdkAlgoId: string) => {
    let diff = selectedSdkServiceIdObj.value[sdkAlgoId]
    if (!diff) return (selectedSdkServiceIdObj.value[sdkAlgoId] = selectedRowKeys)
    const differentElements = selectedRowKeys
      .filter(element => !diff.includes(element))
      .concat(diff.filter(element => !selectedRowKeys.includes(element)))

    sdkAlgoDataList.value.map(sdkAlgo => {
      if (sdkAlgo.id === sdkAlgoId) {
        sdkAlgo.operateList.map(server => {
          differentElements.forEach(ID => {
            if (ID === server.relId) {
              server.addTotalActivateNum = undefined
              server.isInputAddTotalActivateNum = false
              server.fileName = ''
            }
          })
        })
      }
    })
    selectedSdkServiceIdObj.value[sdkAlgoId] = selectedRowKeys
    getSdkAlgoStatus()
  }
  const uploadSuccess = (fileObj: UploadRes, record: SdkServiceListOperateList | any) => {
    record.sign = fileObj.sign
    record.addTotalActivateNum = fileObj.totalActivateNum
    record.fileName = fileObj.fileName
    getSdkAlgoStatus()
  }
  /* ------------------------------------------------------------------------------------------------------------- */

  const init = () => {
    isAdd ? getAlgoList() : getAppDetail()
  }
  init()

  // 服务选择改变
  const checkoutApiChange = () => {
    // 删除当前的数据
    for (let item in selectedApiServiceIdObj.value) {
      if (checkedApiAlgoIds.value.indexOf(item) === -1) {
        delete selectedApiServiceIdObj.value[item]
        // 清除api输入框内容
        apiAlgoDataList.value.map((apiAlgo: any) => {
          if (apiAlgo.id === item) {
            apiAlgo.showErrorCollapse = false
            apiAlgo.operateList.map((formList: any) => {
              formList.addQps = ''
              formList.addTotalCallNum = ''
              formList.isInputAddTotalActivateNum = false
              formList['isInputAddTotalCall'] = false
              formList['isInputAddQps'] = false
            })
          }
        })
      }
    }
  }
  // 服务选择改变
  const checkoutSdkChange = () => {
    // 删除当前的数据
    for (let item in selectedSdkServiceIdObj.value) {
      if (checkedSdkAlgoIds.value.indexOf(item) === -1) {
        delete selectedSdkServiceIdObj.value[item]
        // 清除sdk输入框内容
        sdkAlgoDataList.value.map((sdkAlgo: any) => {
          if (sdkAlgo.id === item) {
            // 清除顶部提示
            sdkAlgo.showErrorCollapse = false
            sdkAlgo.operateList.map((formList: any) => {
              formList.addTotalActivateNum = ''
              formList.fileName = ''
              // 清除输入框红色
              formList.isInputAddTotalActivateNum = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .service-module {
    position: inherit;
    display: flex;
    align-items: flex-start;
    padding: 20px;
    padding-bottom: 0;
    color: rgba(0, 0, 0, 0, 0.01);
    background: @background2;
    border-radius: 8px;
    flex-direction: column;
  }

  :deep(.ant-collapse > .ant-collapse-item-active:last-child > .ant-collapse-header) {
    border-radius: 0;
  }

  .ant-form-item:last-child {
    margin-bottom: 12px !important;
  }

  .ant-collapse {
    overflow: hidden;
    // margin-top: 24px;
    width: 100%;

    :deep(.ant-collapse-header) {
      background-color: #fff;
    }

    :deep(.ant-collapse-content-box) {
      padding: 0;
    }
  }

  :deep(.error-input) {
    border: 1px solid #f00;
  }

  :deep(.ant-tabs) {
    .ant-tabs-tab {
      padding: 0;
      padding-bottom: 6px;
    }

    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: @text01;
        font-weight: 700;
      }
    }

    .ant-tabs-ink-bar {
      height: 3px;
    }
  }

  :deep(.ant-tabs-top > .ant-tabs-nav) {
    &::before {
      border-bottom: none;
    }
  }
  // .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn

  .collapse-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  :deep(.ant-checkbox-group) {
    gap: 20px 16px;
  }

  :deep(.ant-table-wrapper .ant-table:not(.ant-table-bordered) .ant-table-tbody > tr:last-child > td) {
    border-bottom: none;
  }

  :deep(.ant-table-thead > tr > th) {
    background-color: @background2;
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-thead > tr > th) {
    padding: 0 16px;
    height: 32px;
    border-bottom: none;
    font-weight: 400;
    font-size: 12px;
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody > tr > td) {
    padding: 0 16px;
  }

  .over-wrap {
    overflow: hidden;
    white-space: wrap;
  }
</style>
